<template>
  <div>
    <div class="container">
      <heads></heads>
      <el-row :gutter="10">
        <!-- 头部轮播图 -->
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
          <div class="swiper-div">
            <img src="/aboutimage/u80.png" alt="" />
          </div>
        </el-col>
        <!-- 公司简介 -->
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
          <div class="brief">
            我们的团队由有多年经验的资深科学家、工程师和数据分析师组成，拥有全球最先进的技术和大量的教据资源，我们的核心产品包括语音识别、自然语言处理、图像识别等，广泛应用于金融、医疗、教育、零售等各个领域。我们不仅提供针对客户需求的定制解决方案，还提供开放式AI平台，允许客户在我们的平台上构建自己的AI应用程序。我们致力于通过人工智能技术，推动社会进步和创新发展，同时也致力于保护用户数据隐私，并遵守相关法规和规定。我们始终把客户利益放在首位，为客户提供高效、优质的服务。
            我们的团队拥有丰富的经验和专业知识，可以应对各种挑战和需求。我们采用最先进的技术工具和方法，确保我们的解决方案在速度、安全性和可靠性方面处于领先地位。我们不断投资于研发和培训，以保持在科技行业的竞争优势，
          </div>
        </el-col>
        <!-- 公司历程 -->
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
          <div class="title">我们的历程</div>
          <img class="xixixi" src="/aboutimage/u82.svg" alt="" />
          <img src="/aboutimage/u94.svg" class="blues blues1" />
          <img src="/aboutimage/u94.svg" class="blues2" />
          <img src="/aboutimage/u94.svg" class="blues3" />
          <img src="/aboutimage/u94.svg" class="blues4" />
          <img src="/aboutimage/u94.svg" class="blues5" />
        </el-col>
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
          <div class="box box1"></div>
          <div class="box box2"></div>
          <div class="box box3"></div>
          <div class="box box4"></div>
          <div class="box box5"></div>
        </el-col>
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
          <div class="boxs boxs1">2022年xxxxxx文字xxxxxx文字</div>
          <div class="boxs boxs2">2022年xxxxxx文字xxxxxx文字</div>
          <div class="boxs boxs3">2022年xxxxxx文字xxxxxx文字</div>
          <div class="boxs boxs4">2022年xxxxxx文字xxxxxx文字</div>
          <div class="boxs boxs5">2022年xxxxxx文字xxxxxx文字</div>
        </el-col>
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
          <div class="boxs boxs1">2022年xxxxxx文字xxxxxx文字</div>
          <div class="boxs boxs2">2022年xxxxxx文字xxxxxx文字</div>
          <div class="boxs boxs3">2022年xxxxxx文字xxxxxx文字</div>
          <div class="boxs boxs4">2022年xxxxxx文字xxxxxx文字</div>
          <div class="boxs boxs5">2022年xxxxxx文字xxxxxx文字</div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import heads from "@/components/header/head.vue";
export default {
  components: {
    heads,
  },
};
</script>
<style lang="scss">
.swiper-div {
  width: 100vw;
  height: 500px;
  position: relative;
}

.swiper-div img {
  width: 100%;
  height: 100%;
}

.brief {
  position: absolute;
  bottom: -400px;
  left: 50%;
  margin-left: -500px;
  width: 1000px;
  height: 300px;
  // margin: 0 auto;
  // text-align: center;
  line-height: 40px;
  font-size: 19px;
}

.title {
  position: absolute;
  bottom: -500px;
  left: 50%;
  margin-left: -100px;

  width: 200px;
  height: 40px;
  // text-align: center;
  // line-height: 40px;
  // margin: 0 auto;
  font-size: 32px;
  font-weight: bold;
}
.xixixi {
  width: 2px;
  height: 1120px;
  position: absolute;
  left: 50%;
  margin-left: -1px;
  top: 1100px;
}
.blues {
  width: 50px;
  height: 50px;
}
.blues1 {
  position: absolute;
  left: 50%;
  margin-left: -25px;
  top: 1080px;
}
.blues2 {
  position: absolute;
  left: 50%;
  margin-left: -25px;
  top: 1360px;
}
.blues3 {
  position: absolute;
  left: 50%;
  margin-left: -25px;
  top: 1610px;
}
.blues4 {
  position: absolute;
  left: 50%;
  margin-left: -25px;
  top: 1900px;
}
.blues5 {
  position: absolute;
  left: 50%;
  margin-left: -25px;
  top: 2200px;
}
.box {
  width: 180px;
  height: 170px;
  background: red;
}
.box1 {
  position: absolute;
  left: 50%;
  margin-left: -300px;
  top: 1120px;
}
.box2 {
  position: absolute;
  left: 50%;
  margin-left: 120px;
  top: 1360px;
}
.box3 {
  position: absolute;
  left: 50%;
  margin-left: -300px;
  top: 1560px;
}
.box4 {
  position: absolute;
  left: 50%;
  margin-left: 120px;
  top: 1890px;
}
.box5 {
  position: absolute;
  left: 50%;
  margin-left: -300px;
  top: 2180px;
}
.boxs {
  width: 500px;
  height: 80px;
  text-align: center;
  font-weight: bold;
  font-size: 28px;
  // background: red;
}
.boxs1 {
  position: absolute;
  left: 50%;
  margin-left: 60px;
  top: 1080px;
}
.boxs2 {
  position: absolute;
  left: 50%;
  margin-left: -560px;
  top: 1380px;
}
.boxs3 {
  position: absolute;
  left: 50%;
  margin-left: 60px;
  top: 1680px;
}
.boxs4 {
  position: absolute;
  left: 50%;
  margin-left: -560px;
  top: 1920px;
}
.boxs5 {
  position: absolute;
  left: 50%;
  margin-left: 60px;
  top: 2210px;
}
</style>
